<template>
  <t-modal
    title="附件列表"
    width="900px"
    :visible="visible"
    @cancel="closeModal()"
    wrapClassName="file-preview-container"
    forceRender
    v-bind="footer"
  >
    <div class="curve-modal-body">
      <div
        class="file-container"
        v-for="(item, index) in fileList"
        :key="index"
      >
        <div class="file-icon" :class="[filterIcon(item)]"></div>
        <div class="file-content">
          {{ item[replaceFields.fileName] }}
        </div>
        <div class="file-operate">
          <!-- 预览 -->
          <div class="file-button preview-button" @click="viewFile(item)"></div>
          <!-- 下载 -->
          <div class="file-button download-button" @click="downloadFile(item)">
            <a-icon
              type="download"
              :style="{
                fontSize: '16px',
                color: '#FF3F4A',
              }"
            />
          </div>
        </div>
      </div>
    </div>
    <!-- 附件预览弹窗 -->
    <previewModal
      ref="previewModal"
      :visible.sync="previewModal.visible"
      :loading="previewModal.loading"
    ></previewModal>
  </t-modal>
</template>

<script>
import { mapGetters } from "vuex";
import { getToken, downloadDfs } from "@/utils/TopVUI";
//预览
import previewModal from "@/pages/document/minio/previewModal";
export default {
  components: {
    previewModal,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    fileList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    replaceFields: {
      type: Object,
      default: () => {
        return {
          fileName: "fileName",
        };
      },
    },
  },
  data() {
    return {
      footer: {
        footer: null,
      },
      //预览
      previewModal: {
        visible: false,
        loading: false,
      },
    };
  },
  computed: {
    ...mapGetters(["configData", "userInfo"]),
    kkFileView() {
      let index = this.configData.findIndex(
        (item) => item.code === "kkFileView"
      );
      if (index >= 0) {
        return this.configData[index].value;
      } else {
        return "http://192.168.1.216:8012/onlinePreview";
      }
    },
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
        }
      },
      immediate: true,
    },
  },
  methods: {
    //预览
    viewFile(file) {
      let { url } = file;
      this.previewModal.loading = true;
      this.$refs.previewModal.type = "file";
      this.$refs.previewModal.fileUrl =
        this.kkFileView +
        "/onlinePreview?url=" +
        encodeURIComponent(Base64.encode(url)) +
        "&watermarkTxt=" +
        //水印内容
        encodeURIComponent("") +
        "&token=" +
        getToken();
      this.previewModal.visible = true;
      this.previewModal.loading = false;
    },

    //下载
    downloadFile(row) {
      let { url } = row;
      if (!url) {
        this.$message.success("文件不存在", 1.5);
        return;
      }
      downloadDfs(url);
    },

    //关闭
    closeModal() {
      this.$emit("update:visible", false);
    },

    //文件icon
    filterIcon(item) {
      let { fileName } = this.replaceFields;
      let lastIdx = item[fileName].lastIndexOf(".");
      let fileType = "." + item[fileName].substring(lastIdx + 1);
      if (fileType) fileType = fileType.toLowerCase();
      switch (fileType) {
        case ".pdf":
          return "pdf";
        case ".doc":
        case ".docx":
          return "doc";
        case ".xls":
        case ".xlsx":
          return "xls";
        case ".ppt":
        case ".pptx":
        case ".pps":
          return "ppt";
        case ".png":
        case ".jpg":
        case ".jpeg":
        case ".bmp":
        case ".gif":
          return "image";
        case ".txt":
          return "txt";
        case ".zip":
        case ".rar":
          return "zip";
        case ".mp3":
        case ".wav":
        case ".wmv":
          return "music";
        case ".mp4":
        case ".m2v":
        case ".mkv":
          return "video";
        default:
          return "annex";
      }
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.file-preview-container {
  .ant-modal-body {
    padding: 0 !important;
    .curve-modal-body {
      box-sizing: border-box;
      padding: 14px;
      max-height: 700px;
      overflow: auto;
      .file-container {
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 10px 10px;
        background: #f2f2f2;
        border-radius: 4px 4px 4px 4px;
        align-items: center;
        height: 32px;
        position: relative;
        margin: 8px;
        .file-icon {
          width: 20px;
          height: 20px;
          margin-right: 6px;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
          overflow: hidden;
          &.pdf {
            background: url("~@/assets/img/fileIcon/pdf.png");
            background-size: 100% 100%;
          }
          &.doc {
            background: url("~@/assets/img/fileIcon/doc.png");
            background-size: 100% 100%;
          }
          &.xls {
            background: url("~@/assets/img/fileIcon/xls.png");
            background-size: 100% 100%;
          }
          &.ppt {
            background: url("~@/assets/img/fileIcon/ppt.png");
            background-size: 100% 100%;
          }
          &.image {
            background: url("~@/assets/img/fileIcon/image.png");
            background-size: 100% 100%;
          }
          &.txt {
            background: url("~@/assets/img/fileIcon/txt.png");
            background-size: 100% 100%;
          }
          &.zip {
            background: url("~@/assets/img/fileIcon/zip.png");
            background-size: 100% 100%;
          }
          &.music {
            background: url("~@/assets/img/fileIcon/music.png");
            background-size: 100% 100%;
          }
          &.video {
            background: url("~@/assets/img/fileIcon/video.png");
            background-size: 100% 100%;
          }
          &.annex {
            background: url("~@/assets/img/fileIcon/annex.png");
            background-size: 100% 100%;
          }
        }
        .file-content {
          flex: 1;
          font-size: 14px;
          font-family: Microsoft YaHe;
          font-weight: 400;
          padding-right: 20px;
          display: flex;
          overflow: hidden;
          .fileName {
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            white-space: nowrap !important;
            flex: 1;
            color: #000000;
          }
          .fileSize {
            margin-left: 10px;
            color: #bfbfbf;
          }
        }
        .file-operate {
          display: flex;
          .file-button {
            width: 14px;
            height: 14px;
            cursor: pointer;
            border-radius: 50%;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 10px;
            &:last-of-type {
              margin-right: 0;
            }
            .anticon {
              transform: scale(0.8);
            }
            &.download-button {
              background: none;
              border-radius: 0;
              .anticon {
                color: @primary-color !important;
                transform: scale(1);
              }
            }
            &.preview-button {
              background: url("~@/assets/img/fileIcon/preview.png");
              background-size: 100% 100%;
              top: 8px;
              right: 40px;
            }
          }
        }
      }
    }
  }
}
</style>
